<template>
  <div class="login-form">
    <div class="form-header">账号</div>
    <div>
      <label>
        <input type="text" class="form-control" v-model="username" />
      </label>
    </div>
    <div class="form-header">密码</div>
    <div>
      <label>
        <input type="password" class="form-control" v-model="password" />
      </label>
    </div>
    <div class="btn-row">
      <button class="btn" @click="login">
        登录
      </button>
    </div>
  </div>
</template>

<script>

import { STORAGE_KEY } from './helper'

export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login (){
      if(!this.username){
        this.$dlg.alert('请输入账号！', { messageType: 'warning' });
        return;
      }
      if(!this.password){
        this.$dlg.alert('请输入密码！', { messageType: 'warning' });
        return;
      }
      if(this.username!== 'ives'){
        this.$dlg.alert('用户名不存在！', { messageType: 'warning' });
        return;
      }
      if(this.password!== 'ives655'){
        this.$dlg.alert('密码不正确！', { messageType: 'warning' });
        return;
      }
      const data = JSON.stringify({
        name: this.username,
        time: new Date().getTime()
      })
      window.localStorage.setItem(STORAGE_KEY, data)
      this.$emit('close', true)
    }
  }
}
</script>

<style lang="stylus">
.login-form
  padding: 1rem
  display flex
  flex-direction column
  box-sizing border-box
  .btn-row
    margin-top 1rem
  .btn
    padding 0.6rem 2rem
    outline none
    background-color #60C084
    color white
    border 0
  .form-header
    color #666
    margin-bottom 0.5rem
  .form-control
    padding 0.6rem
    border 2px solid #ddd
    width 100%
    margin-bottom 0.5rem
    box-sizing border-box
    outline none
    transition border 0.2s ease
    &:focus
      border 2px solid #aaa
</style>
